<template>
  <div id="modifyBondDetails">
    <div class="homeTitle">债券资料详情</div>
    <table class="sTable" style="margin-top: 10px;">
      <tr>
        <td><span>*</span>债券代码</td>
        <td><el-input v-model="data.code" placeholder="请输入" size="small"></el-input></td>
        <td><span>*</span>债券全称</td>
        <td><el-input v-model="data.name" placeholder="请输入" size="small"></el-input></td>
      </tr>
      <tr>
        <td><span>*</span>债券简称</td>
        <td><el-input v-model="data.simple" placeholder="请输入" size="small"></el-input></td>
        <td><span>*</span>债券性质</td>
        <td>
          <el-select v-model="data.nature" placeholder="请选择" size="small">
            <el-option v-for="item in zqxz" :key="item" :label="item" :value="item"></el-option>
          </el-select>
        </td>
      </tr>
      <tr>
        <td><span>*</span>债券记账品种</td>
        <td>
          <el-select v-model="data.bookVariety" placeholder="请选择" size="small">
            <el-option v-for="item in zqpz" :key="item" :label="item" :value="item"></el-option>
          </el-select>
        </td>
        <td><span>*</span>债券币种</td>
        <td>
          <el-select v-model="data.currency" placeholder="请选择" size="small">
            <el-option v-for="item in zqbz" :key="item" :label="item" :value="item"></el-option>
          </el-select>
        </td>
      </tr>
      <tr>
        <td>债券面额(元)</td>
        <td><span style="color: white;"><el-input v-model="data.denomination" placeholder="请输入" size="small" disabled></el-input></span></td>
        <td><span>*</span>发行价格(元/百元面值)</td>
        <td><el-input v-model="data.price" placeholder="请输入" size="small"></el-input></td>
      </tr>
      <tr>
        <td><span>*</span>计划发行总额(万元)</td>
        <td><el-input v-model="data.planSum" placeholder="请输入" size="small"></el-input></td>
        <td><span>*</span>实际发行总额(万元)</td>
        <td><el-input v-model="data.actualSum" placeholder="请输入" size="small"></el-input></td>
      </tr>
      <tr>
        <td><span>*</span>还本方式</td>
        <td>
          <el-select v-model="data.repaymentMethod" placeholder="请选择" size="small">
            <el-option v-for="item in hbfs" :key="item" :label="item" :value="item"></el-option>
          </el-select>
        </td>
        <td><span>*</span>还本类型</td>
        <td>
          <el-select v-model="data.repaymentType" placeholder="请选择" size="small">
            <el-option v-for="item in hblx" :key="item" :label="item" :value="item"></el-option>
          </el-select>
        </td>
      </tr>
      <tr>
        <td><span>*</span>起息日期</td>
        <td>
          <el-date-picker v-model="data.fromDate" type="date" placeholder="选择日期" size="small"></el-date-picker>
        </td>
        <td><span>*</span>债券期限(天)</td>
        <td>
          <el-input v-model="data.maturity" placeholder="请输入" size="small"></el-input>
        </td>
      </tr>
      <tr>
        <td><span>*</span>计息基础</td>
        <td>
          <el-select v-model="data.bassisDay" placeholder="请选择" size="small">
            <el-option v-for="item in jxjc" :key="item" :label="item" :value="item"></el-option>
          </el-select>
        </td>
        <td><span >*</span>兑付日期</td>
        <td>
          <el-date-picker v-model="data.paymentDate"  type="date" placeholder="请选择日期" size="small"></el-date-picker>
        </td>
      </tr>
      <tr>
        <td><span>*</span>计息方式</td>
        <td>
          <el-select v-model="data.bearingMethod" placeholder="请选择" size="small">
            <el-option v-for="item in jxfs" :key="item" :label="item" :value="item"></el-option>
          </el-select>
        </td>
        <td v-if="data.bearingMethod=='附息'"><span>*</span>利率类型</td>
        <td v-else></td>
        <td v-if="data.bearingMethod=='附息'">
          <el-select v-model="data.rateType" placeholder="请选择" size="small">
            <el-option v-for="item in lllx" :key="item" :label="item" :value="item"></el-option>
          </el-select>
        </td>
        <td v-else></td>
      </tr>
      <tr v-if="data.rateType == '浮动'">
        <td><span>*</span>是否有利率上限</td>
        <td>
          <el-select v-model="data.isRatingCeiling" placeholder="请选择" size="small">
            <el-option v-for="item in yesOrNo" :key="item" :label="item" :value="item"></el-option>
          </el-select>
        </td>
        <td>
          <span v-if="data.isRatingCeiling=='是'"> 
            <span>*</span>
            <span style="color: white;">上限(%)</span>
          </span>          
        </td>
        <td v-if="data.isRatingCeiling=='是'"><el-input v-model="data.ratingCeiling" placeholder="请输入" size="small"></el-input></td>
        <td v-else></td>
      </tr>
      <tr v-if="data.rateType == '浮动'">
        <td><span>*</span>是否有利率下限</td>
        <td>
          <el-select v-model="data.isRatingLower" placeholder="请选择" size="small">
            <el-option v-for="item in yesOrNo" :key="item" :label="item" :value="item"></el-option>
          </el-select>
        </td>
        <td>
          <span v-if="data.isRatingLower=='是'">
            <span>*</span>
            <span style="color: white;">下限(%)</span>
          </span>  
        </td>
        <td v-if="data.isRatingLower=='是'"><el-input v-model="data.ratingLower" placeholder="请输入" size="small"></el-input></td>
        <td v-else></td>
      </tr>
      <tr>
        <td><span>*</span>是否含权</td>
        <td>
           <el-select v-model="data.isRights" placeholder="请选择" size="small">
            <el-option v-for="item in yesOrNo" :key="item" :label="item" :value="item"></el-option>
          </el-select>
        </td>
        <!-- 只有计息方式等于利随本清式或者等于付息的时候才显示 -->
        <td v-if="data.bearingMethod =='利随本清式' || data.bearingMethod=='附息'"><span>*</span>票面利率(%)</td>
        <td v-else></td>
        <td v-if="data.bearingMethod =='利随本清式' || data.bearingMethod=='附息'"><el-input v-model="data.couponRate" placeholder="请输入" size="small"></el-input></td>
        <td v-else></td>
      </tr>
      <tr v-if="data.rateType == '浮动'">
        <td>利率</td>
        <td colspan="3">
          <div class="computer">
            <span>利率=</span>
            <el-select v-model="data.benchmarkRating" placeholder="请选择基准利率" size="small" style="width: 180px">
              <el-option v-for="item in jzll" :key="item" :label="item" :value="item"></el-option>
            </el-select>
            <span>*因子（1+</span>
            <el-input v-model="data.factor" placeholder="请输入" size="small" style="width: 180px" type="number"></el-input>
            <span>）+利差</span>
            <el-input v-model="data.interestMargin" placeholder="请输入" size="small" style="width: 180px" type="number"></el-input>
            <span>%</span>
          </div>
        </td>
      </tr>
    </table>
    <!-- -------------付息信息--------------------- -->
    <p class="tableTitle">付息信息：</p>
    <table class="sTable">
      <tr>
        <td><span>*</span>付息周期</td>
        <td>
          <el-select v-model="data.paymentCycle" placeholder="请选择" size="small">
            <el-option v-for="item in fxzq" :key="item" :label="item" :value="item"></el-option>
          </el-select>
        </td>
        <td><span>*</span>营业日准则</td>
        <td>
          <el-select v-model="data.dayRule" placeholder="请选择" size="small">
            <el-option v-for="item in yyrzc" :key="item" :label="item" :value="item"></el-option>
          </el-select>
        </td>
      </tr>
      <tr>
        <td><span>*</span>推算方法</td>
        <td>
          <el-select v-model="data.calculationMethod" placeholder="请选择" size="small">
            <el-option v-for="item in tsff" :key="item" :label="item" :value="item"></el-option>
          </el-select>
        </td>
        <td><span>*</span>首次付息日</td>
        <td><el-date-picker v-model="data.firstPaymentDay" type="date" placeholder="请选择日期" size="small"></el-date-picker></td>
      </tr>
      <tr>
        <td><span>*</span>付息计划表</td>
        <td><el-button type='primary' size='mini' @click="look">查看</el-button></td>
        <td></td>
        <td></td>
      </tr>
    </table>
    <!-- --------------发行信息------------------- -->
    <p class="tableTitle">发行信息：</p>
    <table class="sTable">
      <tr>
        <td><span>*</span>批准文号</td>
        <td><el-input v-model="data.approvalNumber" placeholder="请输入" size="small"></el-input></td>
        <td><span>*</span>发行批文名称</td>
        <td><el-input v-model="data.nameOfIssue" placeholder="请输入" size="small"></el-input></td>
      </tr>
      <tr>
        <td><span>*</span>托管机构</td>
        <td>
          <el-select v-model="data.trusteeship" placeholder="请选择" size="small">
            <el-option v-for="item in tgjg" :key="item" :label="item" :value="item"></el-option>
          </el-select>
        </td>
        <td><span>*</span>主承销商全称</td>
        <td><el-input v-model="data.mainUnderwriter" placeholder="请输入" size="small"></el-input></td>
      </tr>
      <tr>
        <td><span>*</span>发行机构名称</td>
        <td><el-input v-model="data.mechanismName" placeholder="请输入" size="small"></el-input></td>
        <td><span>*</span>发行机构统一社会信用代码</td>
        <td><el-input v-model="data.mechanismNum" placeholder="请输入" size="small"></el-input></td>
      </tr>
      <tr>
        <td>担保方式</td>
        <td>
          <el-select v-model="guaranteeMode" multiple placeholder="请选择" size="small">
            <el-option v-for="(item, index) in dbfs" :key="index" :label="item" :value="item"></el-option>
          </el-select>
        </td>
        <td>担保信用级别</td>
        <td><el-input v-model="data.creditLevel" placeholder="请输入" size="small"></el-input></td>
      </tr>
      <tr>
        <td>担保机构全称</td>
        <td><el-input v-model="data.guaranteeFullName" placeholder="请输入" size="small"></el-input></td>
        <td>担保机构简称</td>
        <td><el-input v-model="data.guaranteeSimpleName" placeholder="请输入" size="small"></el-input></td>
      </tr>
    </table>
    <!-- ------------评级信息-------------- -->
    <p class="tableTitle">评级信息：</p>
    <table class="sTable">
      <tr>
        <td><span>*</span>主体评级</td>
        <td>
          <el-date-picker v-model="data.subjectStartDate" type="date" placeholder="请选择评级有效起始日" size="small"></el-date-picker>
        </td>
        <td>
          <el-date-picker v-model="data.subjectEndDate" type="date" placeholder="请选择评级有效截止日" size="small"></el-date-picker>
        </td>
        <td>
          <el-select v-model="data.subject" placeholder="请选择" size="small">
            <el-option v-for="item in ztpj" :key="item" :label="item" :value="item"></el-option>
          </el-select>
        </td>
      </tr>
      <tr>
        <td><span>*</span>债项评级</td>
        <td><el-date-picker v-model="data.debtStartDate" type="date" placeholder="请选择评级有效起始日" size="small"></el-date-picker></td>
        <td><el-date-picker v-model="data.debtEndDate" type="date" placeholder="请选择评级有效截止日" size="small"></el-date-picker></td>
        <td>
          <el-select v-model="data.debt" placeholder="请选择" size="small">
            <el-option v-for="item in ztpj" :key="item" :label="item" :value="item"></el-option>
          </el-select>
        </td>
      </tr>
    </table>
    <!-- ------------行权利息-------------- -->
    <p class="tableTitle" v-if="data.isRights !== '否'">行权利息:</p>
    <div class="bottomTable" v-if="data.isRights !== '否'">
      <div class="table">
        <table>
          <tr>
            <td>行权方式</td>
            <td>行权日</td>
            <td>行权价格(元/百元面值)</td>
            <td>行权利率(%)</td>
            <td>行权利差(%)</td>
            <td>行权备注</td>
            <td>操作</td>
          </tr>
          <tr v-for="(item, index) in bondPower" :key="index">
            <td>{{item.way}}</td>
            <td>{{item.day | dateformat('YYYY-MM-DD')}}</td>
            <td>{{item.price}}</td>
            <td>{{item.rate}}</td>
            <td>{{item.margin}}</td>
            <td>{{item.remark}}</td>
            <td><el-button type="primary" size='small' @click="del(index)">删除</el-button></td>
          </tr>
          <tr>
            <td>
              <el-select v-model="bondPo.way" placeholder="请选择" size="small">
                <el-option v-for="item in selFangshi" :key="item" :label="item" :value="item"></el-option>
              </el-select>
            </td>
            <td>
              <el-date-picker v-model="bondPo.day" type="date" placeholder="*请选择日期" size="small">
              </el-date-picker>
            </td>
            <td><el-input v-model="bondPo.price" placeholder="请输入" size="small"></el-input></td>
            <td><el-input v-model="bondPo.rate" placeholder="请输入" size="small"></el-input></td>
            <td><el-input v-model="bondPo.margin" placeholder="请输入" size="small"></el-input></td>
            <td><el-input v-model="bondPo.remark" placeholder="请输入" size="small"></el-input></td>
            <td><el-button type="primary" size="small" @click="add">添加</el-button></td>
          </tr>
        </table>
      </div>
    </div>
    <div class="btn">
      <el-button type="primary" size='small' @click="submit">提交</el-button>
      <el-button type="primary" size='small' @click="$router.push('BondsMaintain')">取消</el-button>
    </div>
  </div>
</template>

<script>
export default {
  name: 'modifyBondDetails',
  data () {
    return {
      tableBottom: [],
      zqxz:['国债','地方政府债','央行票据','政策性银行债券','政策性银行次级债','商业银行债券','商业银行次级债','中期票据','企业债','短期融资券','其他金融债','集合票据','资产支持证券','其他债券','公司债','二级资本工具','非公开定向债务融资工具','同业存单','资产管理公司金融债','超短期融资券','铁道债','可分离债'],
      zqpz: ['国家债券','政策性银行债','央行票据','企业债券','地方政府债券','其他债券','商业银行债','其他金融债','铁道债','同业存单'],
      zqbz:['CNY','USD','HKD','EUR','GBP','AUD','JPY','CAD'],//默认选中CNY
      hbfs: ['到期一次还本','分期还本'],
      hblx: ['全额','减面值'],
      jxjc:['实际/实际','实际/365','实际/360'],
      jxfs:['贴现','利随本清式','附息','零息'],
      fxzq: ['利随本清','月','季度','半年','年'],
      yyrzc: ['向前','向后','不调整'],
      tsff:['到期日向前','起息日向后'],
      tgjg:['中债','上清所'],
      lllx: ['固定', '浮动'],
      ztpj:['AAA','AA+','AA','AA-','A+','A','A-','BBB+','BBB','BBB-','BB+','BB','BB-','B','B-','CCC','CC','C','D'],
      jzll:['S6M_20A','LPR1Y(10)','SHIBOR2W','2W','01010204','M1000164(5)','S3M_5A','S1Y_30A','S1Y_5A','SHIBORON','01010702','01010301','01010205','01010600','FR007','01010701','CNY6M_UPPER','SHIBOR1Y','SHIBOR1W','01010100','CNY3Y_5Y','S6M_7A','S1Y_20A','SHIBOR3M','01010302','M1000162(5)','M1004265(20)','S3M_10A','LPR1Y(5)','B_2W','CNY6M_1Y','CNY1Y_3Y','SHIROR_1W(750)','S1W_120A','S1Y_15A','SHIBOR6M','SHIBOR1M','CNY6M','CNY1Y','FR001','M1004269(20)','SHIBOR_1W(1250)','SHIBOR_1W(250)','S1Y_10A','LPR1Y(20)','1M','CNY5Y_UPPER','CNY3M','M1000160(750)','M1000160(5)'],
      selFangshi: ['发行人\投资人递延兑付选择权','发行人合并债券选择权','发行人赎回权','发行人上调票面利率选择权','其他选择权','投资人调换债券选择权','投资人定向转让选择权','投资人回售选择权'],
      yesOrNo:['是','否'],
      dbfs:['保证','抵押','质押','其他'],
      guaranteeMode: [],
      data: {
        code: '', //债券代码 
        name: '', //债券全称 
        simple: '', //债券简称 
        nature: '', //债券性质 
        bookVariety: '', //债券记账品种 
        currency: 'CNY', //债券币种 
        denomination: '100', //债券面额(元) 
        price: '', //发行价格 
        planSum: '', //计划发行总额 
        actualSum: '', //实际发行总额 
        repaymentMethod: '', //还本方式 
        repaymentType: '', //还本类型 
        bassisDay: '', //计息基础 
        bearingMethod: '', //计息方式 
        rateType: '', //利率类型 
        couponRate: '', //票面利率 
        isRights: '否', //是否含权 
        paymentCycle: '', //付息周期 
        dayRule: '', //营业日准则 
        calculationMethod: '', //推算方法 
        firstPaymentDay: '', //首次付息日 
        approvalNumber: '', //批准文号 
        nameOfIssue: '', //发行批文名称 
        trusteeship: '', //托管机构 
        mainUnderwriter: '', //主承销商全称 
        mechanismName: '', //发行机构名称 
        mechanismNum: '', //发行机构统一社会信用代码 
        guaranteeMode: '', //担保方式 
        creditLevel: '', //担保信用级别 
        guaranteeFullName: '', //担保机构全称 
        guaranteeSimpleName: '', //担保机构简称 
        subjectStartDate: '', //主体评级起始日 
        subjectEndDate: '', //主体评级有效截止日 
        subject: '', //主体评级选项 
        debtStartDate: '', //债项评级起始日 
        debtEndDate: '', //债项评级有效截止日 
        debt: '', //债项评级选项 
        fromDate: '', //起息日期 
        maturity: '', //债券期限 
        paymentDate: '', //兑付日期 
        isRatingCeiling: '', //是否有利率上限
        ratingCeiling: '', //利率上限
        isRatingLower: '', //是否有利率下限
        ratingLower: '', //利率下限
        benchmarkRating: '', //基准利率
        factor: '',  //因子
        interestMargin: '',  //利差
      },
      // 下面表格的添加
      bondPo: {
        way: '',
        day: '',
        price: '',
        rate: '',
        margin: '',
        remark: ''
      },
      bondPower: []
    };
  },
  mounted () {
    if (this.$route.query.data) {
      this.data = this.$route.query.data;
      this.guaranteeMode = this.$route.query.guaranteeMode;
      this.bondPower = this.$route.query.bondPower;
      // this.paymentPlans = this.$route.query.bdData.paymentPlans;
    } else {
      this.getdata ();
    }
  },
  methods: {
    getdata () {
      this.axios.get('bond/selectOneById', {params: {id: this.$route.query.id}})
        .then(({data})=> {
          this.data = data.data.bond;
          this.guaranteeMode = JSON.parse(data.data.bond.guaranteeMode);
          this.bondPower = data.data.bondPower;
        })
    },
    submit() {
      let obj = this.data;
      obj.guaranteeMode = JSON.stringify(this.guaranteeMode);
      obj.bondPower = this.bondPower;
      obj.paymentPlans = [];
      if (this.$route.query.id) obj.id = this.$route.query.id;
      this.axios.post('bond/addOrUpdate',obj)
        .then(({data})=> {
          if(data.code == 200) {
            this.$router.push('BondsMaintain')
          }
        })
    },
  // 查看付息计划表
  look() {
    this.$router.push({path: 'ModInterestpayment', query: {data: this.data, guaranteeMode: this.guaranteeMode, bondPower: this.bondPower, bondId: this.$route.query.id}});
   },
   add() {
     let temp = this.bondPo;
     for(let k in temp) {
       if(!temp[k]) {
         this.$message({message: '请您添加完整',type: 'warning'});
         return false;
       }
     }
     this.bondPower.push({way: this.bondPo.way, day: this.bondPo.day, price: this.bondPo.price, rate: this.bondPo.rate, margin: this.bondPo.margin, remark: this.bondPo.remark});
     for(let k in temp) {
       temp[k] = '';
     }
   },
   del(index) {
     this.bondPower.splice(index, 1);
   }
  },
  watch: {
    // '计息方式'
    // 'data.bearingMethod': {
    //   handler: function(xin, old) {
    //     if(xin=='贴现') {
    //       this.$set(this.data,'repaymentMethod','到期一次还本');
    //       this.$set(this.data,'paymentDate','');//兑付日期
    //       this.$set(this.data,'rateType','');//利率类型
    //       this.$set(this.data,'couponRate','');//票面利率(%)	
    //     } else if (xin == '利随本清式') {
    //       this.$set(this.data,'repaymentMethod','到期一次还本');
    //       this.$set(this.data,'paymentDate','');//兑付日期
    //       this.$set(this.data,'rateType','');//利率类型
    //     }
    //   }
    // }
  }
};
</script>

<style lang="scss">
  #modifyBondDetails {
    .tableTitle {
      height: 34px;
      line-height: 34px;
      color: white;
    }
    .el-select {
      width: 100%;
    }
    .el-date-editor {
      width: 100%;
    }
    .computer {
      display: flex;
      align-items: center;
      // justify-content: center;
      span {
        color: white !important;
      }
    }
    .sTable {
      width: 100%;
      td {
        padding: 5px 10px;
        text-align: center;
        &:nth-child(odd) {
          background-color: #181C1D;
          color: white;
        }
        &:nth-child(even) {
          background: #535853;
        }
        >span {
          color: red;
        }
      }
    }
    .bottomTable {
      table {
        border: 1px solid white;
        width: 100%;
        border-collapse: collapse;
          tr {
            &:first-child {
              background-color: #181C1D !important;;
              color: white;
              td {
                background-color: #181C1D !important;
              }
            }
            td {
              text-align: center;
              padding: 5px 10px;
              border-right: 1px solid white;
              border-bottom: 1px solid white;
              color: white;
              background: #2C3135;
            }
        }
      }
      .addwhite {
        height: 46px;
        background-color: white;
        padding: 0 20px;
        span {
          color: #cccccc;
          line-height: 46px;
        }
      }
    }
    .btn {
      text-align: center;
      margin: 20px 0;
    }
  }
</style>
